<template>
  <div class="todo-header">
    <h3>头部</h3>
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      v-model="title"
      @keyup.enter="add"
    />
  </div>
</template>

<script>
import { nanoid } from "nanoid";
export default {
    name: 'Myheader',
    props: ['addTodo'],
  data() {
    //这里存放数据
    return {
        title:''
    };
  },
  //计算属性
  computed: {},
  //方法集合
  methods: {
    add() {
        // 校验数据
        if(!this.title.trim()) return alert('输入不能为空');
        // 将用户的输入包装成一个对象
        const todoObj = {id: nanoid(),title: this.title,done: false};
        // 通知App组件去添加一个todo对象
        this.addTodo(todoObj)
        // 清空输入
        this.title = ''
    }
  },

};
</script>

<style scoped>
  .todo-header {
    border: 1px solid black;
    margin-left: 41px;
  }

  input {
    width: 313px;
  }
</style>